<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Bootstrap 实例 - 条纹的进度条</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<!--添加一个带有 class .progress ， .progress-striped 创建一个条纹的进度条。
		接着，在上面的 <div> 内，添加一个带有 class .progress-bar ，class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
		添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。-->
	<div class="progress progress-striped">
	    <div class="progress-bar progress-bar-success" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 90%;">
	        <span class="sr-only">90% 完成（成功）</span>
	    </div>
	</div>
	<div class="progress progress-striped">
	    <div class="progress-bar progress-bar-info" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 30%;">
	        <span class="sr-only">30% 完成（信息）</span>
	    </div>
	</div>
	<div class="progress progress-striped">
	    <div class="progress-bar progress-bar-warning" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 20%;">
	        <span class="sr-only">20% 完成（警告）</span>
	    </div>
	</div>
	<div class="progress progress-striped">
	    <div class="progress-bar progress-bar-danger" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 10%;">
	        <span class="sr-only">10% 完成（危险）</span>
	    </div>
	</div>
	<!--添加 class .active，创建一个动画的进度条-->
	<div class="progress progress-striped active">
	    <div class="progress-bar progress-bar-success" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 40%;">
	        <span class="sr-only">40% 完成</span>
	    </div>
	</div>
	
	<!--堆叠的进度条-->
	<div class="progress">
	    <div class="progress-bar progress-bar-success" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 40%;">
	        <span class="sr-only">40% 完成</span>
	    </div>
	    <div class="progress-bar progress-bar-info" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 30%;">
	        <span class="sr-only">30% 完成（信息）</span>
	    </div>
	    <div class="progress-bar progress-bar-warning" role="progressbar"
	         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
	         style="width: 20%;">
	        <span class="sr-only">20% 完成（警告）</span>
	    </div>
	</div>


</body>
</html>